<template>
	<view class="sharecss">
		<uni-popup ref="popup" type="bottom" :safe-area="false">
			<view class="imag-box" >
					<canvas v-if="createShow"  style="width: 100%;height: 100%;" canvas-id="firstCanvass"></canvas>
			</view>
			<view class="share-box">
				<view class="topbox">
					<view class="vxbox" @click="close()">
						<image class="vxbox-img" src="../../static/vip/vx.png" mode=""></image>
						<view class="text">微信好友</view>
						<button open-type="share" class="bnt"></button>
					</view>
					<view class="hbbox">
						<image  @click="createBnt()" class="bcbox-img" src="../../static/vip/vx.png" mode=""></image>
						<view class="text" @click="createBnt()">生成海报</view>
						
					</view>
					<view class="hbbox" @click="xiazBnt()">
						下载
					</view>
				</view>
				<view class="close-box" @click="close()">
					取消
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import * as index from '@/api/index.js'
	export default {
		name: 'Share',
		props:{
			idS: Number
		},
		data() {
			return {
				title: '', //分享标题
				imgage: '', //分享图片
				createShow: false, // 海报显示
				cansWidth: 280, //海报宽度
				cansHeight: 563, //海报高度
				widths: "", //图片列表动态宽度
				imgsrc: "", //保存图片的路径
				userdata: {}, //个人数据
				swiperList: [] ,//海报数组
				detail:'',
				Width:375,
				Height:563,
				share:''
			}
		},
		onShareAppMessage(res) {
		
			return {
			
			}
		},
		mounted() {
			// 获取分享信息
			this.positionEwm()
		},
		methods: {
			// 下载海报
			xiazBnt() {
				uni.showLoading({
					title: '保存海报中'
				});
				
				console.log('保存');
				let tempRatio = 1.5;
				
				// #ifdef H5 || APP-PLUS
				tempRatio = 1;
				// #endif
				
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: uni.upx2px(750), // 截取的画布的宽750
					height: uni.upx2px(1126), // 截取的画布的高1624
					destWidth: uni.upx2px(750), // 保存成的画布宽度750
					destHeight: uni.upx2px(1126), // 保存成的画布高度1624
					canvasId: 'firstCanvass',
					success: (res)=> {
						uni.hideLoading()
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: (red)=> {
								uni.showToast({
									title: '保存相册成功'
								})
								that.imgsrc = res.tempFilePath
								if (e == 2) {
									console.log("自己写分享")
								}
							},
							fail(res) {
								if (res.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
									uni.showModal({
										title: '您需要授权相册权限',
										success(res) {
											if (res.confirm) {
												uni.openSetting({
													success(res) {
				
													},
													fail(res) {
														console.log(res)
													}
												})
											}
										}
									})
								}
							}
						});
					},
					fail(res) {
						uni.hideLoading()
					}
				}, this)
			},
			// 生成海报
			createBnt() {
				this.createShow = true
				this.selseimg(this.swiperList[0].posterImg)
			},
			// 获取二维码图片
			positionEwm() {
				index.positionEwm({id:this.idS}).then(res=>{
					this.userdata = {
						img: res.data.qrcode //二维码
					}
					this.swiperList = [{
							posterImg: res.data.bgImage//背景图
						},
					]
					uni.downloadFile({
						url: this.userdata.img,
						success: (res)=> {
							this.userdata.img = res.tempFilePath
						}
					})
					
				})
			},
			selseimg(e) { //绘制海报
				uni.showLoading({
					title: '生成海报中'
				});
				var context = uni.createCanvasContext('firstCanvass')
				uni.downloadFile({
					url: e,
					success: (res) => {
						console.log(res.tempFilePath,'进来了吗')
						context.drawImage(res.tempFilePath, 0, 0, this.Width, this.Height) //海报背景
					}
				})
				setTimeout((res)=> { //定时器，海报方法不能立即执行，等页面渲染完成
				console.log(this.userdata.img,this.swiperList[0].posterImg)
					context.drawImage(this.userdata.img, this.Width/2-50, this.Height/2-50, 100, 100) //二维码图片
					context.draw()
					console.log(this.userdata.img,'海报二维码')
					context.setFillStyle('#FFFFFF')
					context.setFontSize(14)
					context.save()
					context.beginPath()
					context.arc(44, 350, 25, 0, 2 * Math.PI)
					context.clip()
					context.restore()
					this.$forceUpdate()
					console.log(context)
					uni.hideLoading();
				}, 2000);
			},
			clickImg() {
				wx.previewImage({
					urls: ["http://xczp.wanhedashuju.com/uploads/20220820/0869fdeb488ea85e496b4bd80b3202d9.png"], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			// 打开弹窗
			open() {
				this.$refs.popup.open()
			},
			// 关闭弹窗
			close(){
				this.$refs.popup.close()
			}
		}
	}
</script>

<style scoped lang="scss">
	.sharecss {
		.imag-box {
			height: 60vh;
			width: 375px;
			margin-bottom: 4vh;
			background: #FFFFFF;
			// image {
			// 	width: 95%;
			// 	height: 100%;
			// }
		}
		.share-box {
			height: 26vh;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			background-color: #FFFFFF;
			.topbox {
				padding-top: 40rpx;
				display: flex;
				justify-content: center;
				.vxbox {
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;
					.bnt {
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						opacity: 0;
						z-index: 999;
					}
					.vxbox-img {
						width: 80rpx;
						height: 80rpx;
					}
					.text {
						margin-top: 12rpx;
					}
				}
				.hbbox {
					margin-left: 50rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					.bcbox-img {
						width: 80rpx;
						height: 80rpx;
					}
					.text {
						margin-top: 12rpx;
					}
				}
			}
			.close-box {
				margin-top: 20rpx;
				border-top: 2rpx solid #f5f5f5;
				padding: 30rpx 20rpx 0rpx 20rpx;
				text-align: center;
			}
		}
	}
	.canvas {
		display: flex;
		justify-content: center;
	}
</style>
